<template>
	<page-router-view name="Roles">
		<md-advanced-table :data="table.rows" v-bind="tableAttrs">
			<div slot="buttons">
				<vxe-form @submit="onSearch">
					<vxe-form-item title="用户名">
						<vxe-input v-model="query.name" placeholder="通过名称查询"></vxe-input>
					</vxe-form-item>
					<vxe-form-item>
						<v-btn type="submit" small class="mr-1">搜索</v-btn>
						<v-btn color="success" @click="add()" small>新增</v-btn>
					</vxe-form-item>
				</vxe-form>
			</div>

			<template #isDefault="{row}">
				<vxe-switch v-model="row.isDefault" @change="onChange(row,$event)"/>
			</template>
			<template #action="{row}">
				<v-btn small color="purple lighten-4" class="mr-1" @click="perms(row)">权限</v-btn>
				<v-btn small color="primary" class="mr-1" @click="edit(row)">编辑</v-btn>
				<v-btn small color="error" class="mr-1" :disabled="!row.canDelete" @click="onDelete(row)">删除</v-btn>
			</template>
		</md-advanced-table>
		<role-menu-dialog ref="menu"/>
		<role-dialog ref="dialog" @success="getTableData"/>
	</page-router-view>
</template>

<script>
import PageRouterView from '@/components/widget/PageRouterView';
import MdTableMixins from '@/common/mixins/MdTableMixins';
import RoleApi from '@/common/api/RoleApi';
import RoleMenuDialog from '@/views/admin/modules/RoleMenuDialog';
import MdAdvancedTable from '@/components/widget/MdAdvancedTable';
import RoleDialog from '@/views/admin/modules/RoleDialog';

export default {
	name: 'Role',
	components: {RoleDialog, MdAdvancedTable, RoleMenuDialog, PageRouterView},
	mixins: [MdTableMixins],
	data() {
		return {
			query: {
				name: undefined
			},
			loadFunc: () => {
				return RoleApi.list(this.query);
			},
			tableAttrs: this.$utils.tableAttrs({
				highlightHoverRow: true,
				stripe: true,
				toolbarConfig: {
					custom: true,
					zoom: true,
					slots: {
						buttons: 'buttons'
					}
				},
				columns: [
					this.$utils.gto({type: 'seq', title: '#', width: 40}),
					this.$utils.gto({field: 'name', title: '名称'}),
					this.$utils.gto({field: 'displayName', title: '显示名称'}),
					this.$utils.gto({field: 'isDefault', title: '是否默认', width: 80, slots: {default: 'isDefault'}}),
					this.$utils.gto({field: 'createdAt', title: '创建时间', formatter: ({cellValue}) => this.dateFormatter(cellValue)}),
					this.$utils.gto({field: 'updatedAt', title: '更新时间', formatter: ({cellValue}) => this.dateFormatter(cellValue)}),
					this.$utils.gto({field: 'action', title: '操作', width: 200, fixed: 'right', slots: {default: 'action'}})
				]
			})
		}
	},
	mounted() {
	},
	methods: {
		onChange(row, {value}) {
			RoleApi.update(row.id, {isDefault: value}).then(res => {
				this.$utils.responseHandler(res, true, true);
			}).finally(() => this.getTableData());
		},
		add() {
			this.$refs.dialog.add();
		},
		edit(row) {
			this.$refs.dialog.edit(row);
		},
		perms(row) {
			this.$refs.menu.edit(row.id)
		},
		onDelete(row) {
			this.$utils.onConfirm(`是否删除"${row.displayName}?`).then(() => {
				RoleApi.delete(row.id).then(res => {
					this.$utils.responseHandler(res, true, true).then(this.onSearch);
				})
			})
		}
	}
}
</script>

<style scoped>

</style>